/**
 * @typedef {object} nav
 * @property {string} nav.url 导航链接
 * @property {string} nav.text 导航项
 * @property {string} [nav.icon] 导航图标类名
 */
/**
 * 导航菜单
 * 导航项可以
 * - 高亮 危险
 * - 无法点击
 * 弹出位置
 * @param {object} props 
 * @param {Array.<nav>} props.navArr 每项导航参数数组
 */
function Nav(props) {
  const navItem = props.navArr.map(({ url, text, iconClass }) => {
    return (
      <li key={text}>
        <a href={url}  >
          <i className={iconClass}></i>{text}
        </a>
      </li>
    )
  })
  return (
    <nav>
      <ul> {navItem} </ul>
    </nav>
  )
}

const nav = [
  { url: '#', text: 'home', iconClass: 'iconfont icon-home' },
  { url: '#', text: '导航项1', iconClass: 'iconfont icon-caidan' },
  { url: '#', text: '多媒体', iconClass: 'iconfont icon-duomeiti' },
  { url: '#', text: '主题', iconClass: 'iconfont icon-zhuti' }
]

ReactDOM.render(
  <Nav navArr={nav} />,
  document.getElementById("root")
)